<template>
  <main class="w-screen h-screen flex" @mouseover="showSetting=true" @mouseleave="showSetting=false" @click.right="handleClose">
    <div class="fixed w-full h-full z-50" v-show="showSetting">
      <setting-two theme="outline" size="24" fill="#fff" class="c-icon menu-icon top-3" @click="handleSettingClick"/>
      <round v-if="isRound" theme="outline" size="24" fill="#fff" class="c-icon menu-icon bottom-3" @click="handleClick" />
      <square v-else theme="outline" size="24" fill="#fff" class="c-icon menu-icon bottom-3" @click="handleClick"/>
    </div>
    <video class="object-cover border-red-500" :class="isRound ? 'rounded-full' : 'rounded-3xl'"
      :style="{
        borderWidth: `${settingInfo.borderSize || 8}px`,
        borderColor: `#${settingInfo.borderColor || 'EF4444'}`,
      }"
    ></video>
  </main>
</template>

<script setup lang="ts">
import { SettingTwo, Round, Square } from '@icon-park/vue-next';
import {onMounted, ref, watch} from "vue";
import {showSettingView, settingInfo} from "../store";

const isRound = ref(true)
const showSetting = ref(false)

onMounted(() => {
  const constraints = {
    audio: false,
    video: true
  };
  playVideo(constraints)
})

const playVideo = (constraints): void => {
  const video = document.querySelector('video');
  navigator.mediaDevices.getUserMedia(constraints)
    .then(mediaStream => {
      console.log(mediaStream.getVideoTracks())
      video.srcObject = mediaStream;
      video.play()
    }).catch(err => {
      console.log(err)
    })
}

const handleClick = (): void => {
  console.log("click btn")
  isRound.value = !isRound.value
}

const handleSettingClick = (): void => {
  showSettingView.value = true
}

const handleClose = (): void => {
  ElMessageBox.confirm("你确定要关闭摄像头应用吗？", '警告', {
    cancelButtonText: '取消',
    confirmButtonText: '确定'
  }).then(() => {
      window.api.handleClose()
  })
}

watch(() => settingInfo.deviceId, (deviceId) => {
  if (deviceId) {
    const constraints = {
      audio: false,
      video: {
        deviceId: deviceId
      }
    }
    playVideo(constraints)
  }
})
</script>

<style scoped lang="scss">
  .menu-icon {
    @apply absolute left-1/2 -translate-x-1/2;
  }
</style>
